<template>
    <div class="live-check">
        <nav-header></nav-header>
        <div class="zh-table">
            <div class="zh-table-open clear">
                <div class="zh-open-left fl">
                    <div class="open-width" style="width: 150px;" v-if="$store.state.platformInformation">
                        <el-select v-model="platform_id" filterable placeholder="来源学校/教育局">
                            <el-option v-for="item in platformList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </div>
                    <div class="open-width" style="width: 100px;">
                        <!-- v-if="!$store.state.checkLevel" -->
                        <el-select v-model="listParam.status" placeholder="状态">
                            <el-option label="全部状态" :value="-1"></el-option>
                            <el-option label="待审核" :value="1"></el-option>
                            <el-option label="已通过" :value="2"></el-option>
                            <el-option label="已拒绝" :value="3"></el-option>
                        </el-select>
                    </div>
                    <div class="open-width" v-if="$store.state.platformInformation">
                        <el-date-picker 
                            type="daterange" 
                            :editable="false" 
                            :clearable="false" 
                            range-separator="至" 
                            start-placeholder="开始日期" 
                            end-placeholder="结束日期" 
                            value-format="yyyy-MM-dd" 
                            v-model="pickerDate" 
                            style="width: 100%;">
                        </el-date-picker>
                    </div>
                    <div class="open-width">
                        <el-input placeholder="直播名称" v-model="keyword" @keyup.enter.native="search"></el-input>
                    </div>
                    <el-button type="primary" @click="search">搜索</el-button>
                    <el-button type="primary" @click="reset">重置</el-button>
                </div>
                <div class="zh-open-right fr">
                    <el-button type="danger" @click="deleteConfirm">批量删除</el-button>
                </div>
            </div>
            <div class="zh-table-contents" v-loading="loading.status" :element-loading-text="loading.txt">
                <el-table :data="listData" @selection-change="handleSelectionChange" border max-height="541">
                    <el-table-column type="selection" align="center" width="50" show-overflow-tooltip>
                    </el-table-column>
                    <!-- <el-table-column prop="source_name" label="来源" align="center" v-if="$store.state.checkLevel && $store.state.platformInformation" show-overflow-tooltip>
                    </el-table-column> -->
                    <el-table-column prop="name" label="直播名称" align="center" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="liveInfo.category" label="直播分类" align="center" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="liveInfo.teacher_name" label="主讲人" align="center" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="liveInfo.cl_name" label="直播教室" align="center" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="liveInfo.start_time" label="直播时间" align="center" show-overflow-tooltip>
                    </el-table-column>
                    <!--      <el-table-column prop label="是否加密" align="center" show-overflow-tooltip>
                        <template slot-scope="scope">{{scope.row.liveInfo.password ? '是' : '否'}}</template>
                    </el-table-column> -->
                    <el-table-column prop="" label="状态" v-if="$store.state.checkLevel" align="center" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <template v-if="scope.row.type === 1">
                                {{ scope.row.status_txt }}
                            </template>
                            <template v-if="scope.row.type === 2">
                                {{ scope.row.liveInfo._status_text}}
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" prop="handle" label="操作" align="center" width="250">
                        <template slot-scope="scope">
                            <!-- 推送的直播 -->
                            <!-- type = 2:状态（1：正常；0：已删除；2：未通过；3：拒绝；4:已撤销；5:已关闭） -->
                            <template v-if="scope.row.type == 2">
                                <!-- <el-button @click="toLink('/resources/live/live-details?id=' + scope.row.id)" type="text">查看</el-button> -->
                                <template v-if="scope.row.status === 1">
                                    <!-- <el-button v-if="scope.row.liveInfo._status !== 1 && scope.row.liveInfo._status !== 3" @click="videoView(scope.row)" type="text">预览</el-button> -->
                                    <!-- <el-button v-if="$store.state.platformInformation && levelPid > 0 && scope.row.liveInfo.status === 2" @click="pushUpTrigger(scope.row)" type="text">推上级</el-button> -->
                                    <!-- <el-button v-if="scope.row.liveInfo._status !== 1 && scope.row.liveInfo._status !== 3" @click="stopConfirm(scope.row)" type="text" class="delete-button">停止</el-button> -->
                                    <!-- <el-button @click="toLink('/resources/live/live-statistics?id=' + scope.row.id)" type="text">直播统计</el-button> -->
                                </template>
                                <template v-if="scope.row.status === 2 && scope.row.liveInfo._status !== 4">
                                    <el-button type="text" @click="passTrigger(scope.row)">通过</el-button>
                                    <el-button type="text" @click="rejectTrigger(scope.row)">拒绝</el-button>
                                </template>
                                <!-- <el-button v-if="scope.row.liveInfo.status === 3" type="text" @click="checkReject(scope.row)">拒绝理由</el-button> -->
                                <el-button type="text" v-if="scope.row.status !== 2" class="delete-button" @click="delTrigger(scope.row)">删除</el-button>
                            </template>
                            <!-- 预约的直播 -->
                            <!-- type = 1 审核状态（0：删除；1：待审核；2：批准；3：拒绝） -->
                            <template v-if="scope.row.type == 1">
                                <!-- <el-button @click="toLink('/resources/live/live-details?id=' + scope.row.liveInfo.id)" type="text">查看</el-button> -->
                                <template v-if="scope.row.status === 2">
                                    <el-button v-if="scope.row.liveInfo._status !== 3" @click="videoView(scope.row)" type="text">预览</el-button>
                                    <!-- <el-button v-if="$store.state.platformInformation && levelPid > 0" @click="pushUpTrigger(scope.row)" type="text">推上级</el-button> -->
                                    <!-- <el-button v-if="scope.row.liveInfo._status !== 3" @click="stopConfirm(scope.row)" type="text" class="delete-button">停止</el-button> -->
                                    <!-- <el-button @click="toLink('/resources/live/live-statistics?id=' + scope.row.id)" type="text">直播统计</el-button> -->
                                </template>
                                <template v-if="scope.row.status === 1">
                                    <el-button type="text" @click="passTrigger(scope.row)">通过</el-button>
                                    <el-button type="text" @click="rejectTrigger(scope.row)">拒绝</el-button>
                                </template>
                                <!-- <el-button v-if="scope.row.liveInfo.status === 3" type="text" @click="checkReject(scope.row)">拒绝理由</el-button> -->
                                <el-button type="text" v-if="scope.row.status !== 1" class="delete-button" @click="delTrigger(scope.row)">删除</el-button>
                            </template>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="table-pagination" v-show="total_number > 10">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParam.page_index" :page-sizes="[10, 20, 30, 40, 50, 100]" :page-size="listParam.page_size" layout="total, sizes, prev, pager, next, jumper" :total="total_number"></el-pagination>
                </div>
            </div>
        </div>
        <!-- 视频预览begin -->
        <!--         <transition name="el-fade-in-linear">
            <div class="masking" :class="{ activeLive: isActive }">
                <div class="maskingBox">
                    <div class="masking_h">
                        <span>视频预览</span>
                        <i class="el-icon-close" @click="viewClose"></i>
                    </div>
                    <div class="masking_c">
                        <videoAlertView v-if="showVideoPlayer" :playParam.sync="playParam"></videoAlertView>
                    </div>
                </div>
            </div>
        </transition> -->
        <transition name="el-fade-in-linear">
            <div class="masking" :class="{ activeLive: isActive }">
                <div class="maskingBox">
                    <div class="masking_h">
                        <span>直播预览</span>
                        <i class="el-icon-close" @click="viewClose"></i>
                    </div>
                    <div class="masking_c">
                        <!-- <flvPlayer v-if="showVideoPlayer" id="flvPlayer" :playerOption.sync="playerOption"></flvPlayer> -->
                        <flvdplayer v-if="showVideoPlayer" :playerOption.sync="playerOption"></flvdplayer>
                    </div>
                </div>
            </div>
        </transition>
        <!-- bengin -->
        <el-dialog title="拒绝" :visible.sync="rejectDescFlag" :close-on-click-modal="false" :close-on-press-escape="false" width="40%">
            <div v-text="rejectDesc"></div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="rejectDescFlag = false">取 消</el-button>
                <el-button type="primary" @click="rejectDescFlag = false">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 拒绝理由end -->
        <!-- 拒绝bengin -->
        <el-dialog title="拒绝" :visible.sync="rejectWin" :close-on-click-modal="false" :close-on-press-escape="false" :width="$store.state.platformInformation ? '33%' : '40%'">
            <div class="textarea-box">
                <p style="text-align: center" v-if="$store.state.platformInformation">是否拒绝该直播的推送？</p>
                <el-form v-else :model="rejectForm" ref="rejectForm" label-width="80px" class="demo-ruleForm">
                    <el-form-item label="拒绝理由" prop="txt" :rules="[{required: true,message: '请填写拒绝理由',validator: checkValue}]">
                        <el-input type="textarea" placeholder="在此填写拒绝理由..." v-model="rejectForm.txt" :maxlength="100" required></el-input>
                    </el-form-item>
                </el-form>
                <p class="str-num" v-show="!$store.state.platformInformation">
                    <span v-text="rejectForm.txt.length"></span>/
                    <span class="str-max">100</span>
                </p>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="rejectWinHide">取 消</el-button>
                <el-button type="primary" @click="reject">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 拒绝end -->
    </div>
</template>
<script>
import videoAlertView from "../../public/videoAlertView";
// import flvPlayer from "../../public/flvPlayer";
import flvdplayer from "@/components/public/flvdplayer";
export default {
    data() {
        return {
            platform_id: "",
            keyword: "",
            platformList: [],
            loading: {
                status: false,
                txt: "获取数据..."
            },
            total_number: 0,
            listData: [],
            pickerDate: [],
            listParam: {
                start_time: undefined,
                end_time: undefined,
                // type: 2,
                // platform_id: 0,
                keyword: undefined,
                status: -1,
                page_index: 1,
                page_size: 10,
                school_id: undefined
            },
            rejectWin: false /*拒绝弹窗 */ ,
            rejectForm: {
                txt: "" /*拒绝理由填写 */
            },
            rejectObj: null /*拒绝对象 */ ,
            isActive: true,
            home_flag: 1,
            showVideoPlayer: false,
            playParam: { play_url: "" },
            rejectDescFlag: false,
            rejectDesc: "",
            ids: [],
            /*选择是列表数据*/
            levelPid: 0,
            /*当前用户所在平台的级别（pid）*/

            isActive: true,
            showVideoPlayer: false,
            playerOption: { type: "flv", url: "" }
        };
    },
    created() {
        this.getList();
        this.$store.state.platformInformation && this.get_canseeposition();
    },
    methods: {
        videoView(item) {
            this.showVideoPlayer = true;
            this.playerOption.url = item.liveInfo.play_url;
            this.isActive = false;
        },
        viewClose() {
            this.showVideoPlayer = false;
            this.isActive = true;
        },
        pushUp(id) {

            let params = {
                live_id: id
            }
            const success = res => {
                this.$message.success(res.msg)
                this.ids = [];
                this.getList();
            }
            this.$ajax.post("api/live/live_push", params, {
                func: { success: success }
            });
        },
        pushUpTrigger(data) {
            let title = `是否要将资源推送至${this.platform}？（需经过审核）`;
            this.$confirm(title, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                if (data) {
                    let ids = data.id;
                    this.pushUp(ids);
                } else {
                    this.pushUp(this.ids.join(','));
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消推送'
                });
            });
        },
        /**
         * 停止当前直播
         * @param {Number} id 直播 id
         */
        stopLive(obj) {
            let success = (res => {
                this.$message.success(res.msg);
                setTimeout(() => {
                    this.getList();
                }, 800)
            });
            let params = { id: obj.id }

            this.$ajax.put('api/live/stop_live', params, { func: { success: success } })
        },
        /**
         * 确认停止当前直播
         * @param {Object} obj 当前直播信息
         */
        stopConfirm(obj) {
            let yes = (res => {
                this.stopLive(obj);
            })
            let cancel = (res => {})

            this.e_confirm({ yes: yes, cancel: cancel, txt: '确定将 ' + obj.name + ' 停止吗？' });
        },
        toLink(link) {
            this.$router.push(link);
        },
        checkValue(rule, value, callback) {
            if (!checkSpace(value)) {
                callback(new Error("请输入有效值"));
            } else {
                callback();
            }
        },
        get_canseeposition() {
            const success = res => {
                let data = res.data[0]
                this.platformList = data.children;
                this.levelPid = data.pid
            };
            let params = {
                // id: this.$store.getters.userInfo.platform_id,
                // updown: 'down'
            }
            this.$ajax.get('/api/newlevel/levelorg_list', { params, func: { success: success } })
        },
        getList() {
            this.loading.status = true;
            let params = this.listParam;
            const success = res => {
                console.log(res.data.data, 98989)
                this.loading.status = false;
                this.listData = res.data.data;
                this.total_number = res.data.data_sum;
            };

            this.$ajax.get("api/live/live_pushed_receive", {
                params: params,
                func: { success: success }
            });
        },
        search() {
            this.listParam.start_time =
                this.pickerDate.length > 0 ? this.pickerDate[0] : undefined;
            this.listParam.end_time =
                this.pickerDate.length > 0 ? this.pickerDate[1] : undefined;
            this.listParam.school_id = this.platform_id ? this.platform_id : undefined;
            this.listParam.keyword = this.keyword ? this.keyword : undefined;
            this.listParam.page_index = 1;
            this.getList();
        },
        reset() {
            this.pickerDate = [];
            this.platform_id = undefined;
            this.keyword = undefined;
            this.listParam = {
                start_time: undefined,
                end_time: undefined,
                // type: 2,
                school_id: undefined,
                keyword: undefined,
                status: -1,
                page_index: 1,
                page_size: 10
            };
            this.getList();
        },
        handleSizeChange(size) {
            this.listParam.page_size = size;
            this.getList();
        },
        handleCurrentChange(page) {
            this.listParam.page_index = page;
            this.getList();
        },
        pass(data) {
            /*批准*/
            let params = {
                id: data.id
            };

            const fail = (res => {
                /** 2019-6-10 失败返回提示是一个数组 */
                let text = '';

                res.msg.forEach(item => {
                    text += item + '<br />';
                })

                this.$message({
                    type: 'error',
                    message: text,
                    dangerouslyUseHTMLString: true
                });
            })
            const success = res => {
                this.$message.success(res.msg);
                this.getList();
            };

            if (data.type == 2) {
                params.status = 1
                this.$ajax.post("api/live/live_approve", params, {
                    func: { success: success, fail }
                });
            } else {
                this.$ajax.post("api/live/live_pushed_receive", params, {
                    func: { success: success }
                });
            }

        },
        passTrigger(data) {
            /*批准提示 */
            let tipsTxt = `确定批准${data.name}通过审核吗？`;
            this.$confirm(tipsTxt, "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                .then(() => {
                    this.pass(data);
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消批准"
                    });
                });
        },
        rejectTrigger(data) {
            /*拒绝弹窗 */
            this.rejectWin = true;
            this.rejectObj = data;
        },
        rejectWinHide() {
            /*隐藏拒绝弹窗 */
            this.rejectWin = false;
            this.rejectObj = null;
            this.rejectForm.txt = "";
        },
        reject() {
            /*拒绝 */
            let params = {
                id: this.rejectObj.id,
                comment: this.rejectForm.txt
            };
            const success = res => {
                this.$message.success(res.msg);
                this.rejectWinHide();
                this.getList();
            };
            if(this.$store.state.platformInformation) {
                console.log(this.rejectObj.type)
                if (this.rejectObj.type == 2) {
                    // params.status = 3,
                        this.$ajax.post("api/live/live_approve", params, {
                            func: { success: success }
                        });
                } else {
                    this.$ajax.put("api/live/live_pushed_receive", params, {
                        func: { success: success }
                    });
                }
            }else{
                this.$refs[`rejectForm`].validate(valid => {
                    if (valid) {

                        if (this.rejectObj.type == 2) {
                            params.status = 3,
                                this.$ajax.post("api/live/live_approve", params, {
                                    func: { success: success }
                                });
                        } else {
                            this.$ajax.put("api/live/live_pushed_receive", params, {
                                func: { success: success }
                            });
                        }

                    } else {
                        return;
                    }
                });
            }
            
        },
        del(id, type) {
            let params = {
                id: id,
            };
            const success = res => {
                this.$message.success(res.msg);

                if (this.listData.length - 1 === 0) {
                    if (this.listParam.page_index > 1) {
                        this.listParam.page_index--;
                    } else {
                        this.listParam.page_index = 1;
                    }
                }
                this.getList();
            };
            if(type === 2){
                this.$ajax.post("api/live/live_approve", params, { func: { success: success } });
            }else{
                this.$ajax.delete("api/live/live_pushed_receive", {params: params,func: { success: success }});
            }
        },
        delTrigger(data) {
            /*删除提示 */
            let tipsTxt = `确认删除${data.name}吗？`;

            this.$confirm(tipsTxt, "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                .then(() => {
                    this.del(data.id, data.type);
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除"
                    });
                });
        },
        /**
         * 批量删除 
         */
        deleteConfirm() {
            if (this.ids.length === 0) {
                this.$message.warning("请选择要删除的直播");
                return false;
            }

            const cancel = (res => {})
            const yes = (res => {
                this.del(this.ids);
            })

            this.e_confirm({ yes, cancel, txt: "确定要删除选中的直播吗？" });
        },
        handleSelectionChange(val) {
            this.ids = [];
            if (val.length > 0) {
                val.forEach(item => {
                    this.ids.push(item.id);
                })
            }
        },
        // 视频预览
        /*       viewClose() {
                   this.showVideoPlayer = false;
                   this.isActive = true;
               },
               videoView(obj) {
                   let jsonData = obj;
                   this.loading.status = true;
                   let success = data => {
                       this.loading.status = false;
                       this.playParam.play_url = jsonData.rtmp;
                       this.showVideoPlayer = true;
                       this.isActive = false;
                   };
                   let fail = data => {
                       this.loading.status = false;
                       this.$message.warning(data.msg);
                   };
                   //执行请求，并将回调方法变成config成员以便鉴权过期可以执行
                   this.$ajax.get("api/video/check_view", {
                       params: { id: jsonData.id },
                       func: { success: success, fail: fail }
                   });
               },*/
        checkReject(data) {
            this.rejectDescFlag = true;
            this.rejectDesc = data.liveInfo.comment;
        }
    },
    components: {
        videoAlertView,
        // flvPlayer,
        flvdplayer
    }
};

</script>
<style lang="scss">
.live-check {
    .textarea-box {
        position: relative;
        .el-textarea__inner {
            min-height: 120px !important;
            resize: none;
        }
        .str-num {
            position: absolute;
            padding: 0;
            margin: 0;
            left: 0;
            bottom: 5px;
            right: 15px;
            text-align: right;
            .str-max {
                color: #ddd;
            }
        }
    }
    .masking {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transition: 0.5s;
        background: rgba(0, 0, 0, 0.3);
        z-index: 4;
        .maskingBox {
            position: absolute;
            top: 20%;
            left: 50%;
            width: 800px;
            margin-left: -400px;
            background: #fff;
        }
        .masking_h {
            padding: 10px 15px;
            background: #348efc;
            text-align: center;
            text-align-last: justify;
            >span,
            >i {
                font-size: 16px;
                text-align-last: initial;
                display: inline-block;
                vertical-align: middle;
                color: #fff;
            }
            >i {
                cursor: pointer;
            }
        }
        .masking_c {
            height: 450px;
            padding: 15px;
        }
    }

    .activeLive {
        opacity: 0;
        visibility: hidden;
    }
    .videPAHT {
        color: #409eff;
        margin-right: 10px;
    }
}

</style>
